<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lib/easel.js"></script>
  <script src="../lib/preload.js"></script>
  <script src="../lib/tween.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .test {
      background: rgb(24, 24, 24);
    }
  </style>
</head>

<body>
  <canvas id="app" width="500" height="500"></canvas>

  <script>
    let stage = new createjs.Stage('app');
    // let player = new createjs.Container();

    class Player {
      constructor() {
        this.container = new createjs.Container();

        this.x = 100;
        this.y = 100;
        this.r = 150;

        this.rotate = 0;

        this.create();
        this.append(stage);
      }

      create() {
        let main = new createjs.Shape();
        main.graphics.beginFill('rgb(109, 109, 209)').drawCircle(0, 0, 50);
        let leftHand = new createjs.Shape();
        leftHand.graphics.beginFill('rgb(24, 24, 24)').drawCircle(-this.r / 4, -this.r / 4, 20);
        let rightHand = new createjs.Shape();
        rightHand.graphics.beginFill('rgb(24, 24, 24)').drawCircle(this.r / 4, -this.r / 4, 20);

        this.container.addChild(leftHand);
        this.container.addChild(rightHand);
        this.container.addChild(main)
      }

      append(parent) {
        parent.addChild(this.container);
      }

      move(){
        this.container.x = this.x;
        this.container.y = this.y;

        this.container.rotation = this.rotate;
      }
    }

    let player = new Player();

    createjs.Ticker.addEventListener('tick', () => {
      player.move();

      stage.update();
    })
  </script>
</body>

</html>